<template>
    <div>
        <!-- 面包屑导航区 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>用户管理</el-breadcrumb-item>
            <el-breadcrumb-item>活动列表</el-breadcrumb-item> 
        </el-breadcrumb>
 
        <!-- 卡片视图区域 -->
        <el-card >
            <!-- 搜索与添加区域 -->
            <el-row :gutter="30">
                <el-col :span="7">
                    
                    <el-input placeholder="请输入内容" v-model="queryInfo.query" clearable @clear="getUserList">
                    <el-button slot="append" icon="el-icon-search"  @click="getUserList"></el-button>
                    </el-input>
                </el-col>
                <el-col :span="4">
                    <el-button type="primary" @click="addDialogVisible=true">添加用户</el-button>
                </el-col>
            </el-row>
            <!-- 用户列表区域 -->
                <!-- 添加border属性可以给表格加边框线,stripe斑马纹 -->
            <el-table
                border
                stripe
                :data="userlist">

                <!-- 添加一行索引列 -->
                <el-table-column
                type="index">
                </el-table-column>

                <el-table-column
                prop="username"
                label="姓名"
                width="180">
                </el-table-column>
                <el-table-column
                prop="email"
                label="邮箱"
                width="180">
                </el-table-column>
                <el-table-column
                prop="mobile"
                label="电话">
                </el-table-column>

                <el-table-column
                prop="role_name"
                label="角色">
                </el-table-column>

                <el-table-column
                label="状态">
                    <!-- 作用域插槽接受数据 -->
                    <template slot-scope="scope">
                        <el-switch
                            v-model="scope.row.mg_state" @change="userStateChanged(scope.row)">
                        </el-switch>
                    </template>
                </el-table-column>

                <el-table-column
                width="180px"
                label="操作">
                <!-- 这个里面也是使用作用域插槽 -->
                <template slot-scope="scope">
                    <el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog(scope.row.id)"></el-button>
                    <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeUserById(scope.row.id)"></el-button>
                    <!-- 鼠标悬浮在按钮上会出现文字提示信息 -->
                    <el-tooltip effect="dark" content="分配角色" placement="top" :enterable="false">
                        <el-button type="warning" icon="el-icon-setting" size="mini"></el-button>
                    </el-tooltip>
                </template>
                </el-table-column>
            </el-table>

            <!-- 分页区域 -->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="queryInfo.pagenum"
                :page-sizes="[1, 2, 5, 10]"
                :page-size="100"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"> 
            </el-pagination>

            <!-- 添加用户的对话框 -->
            <el-dialog
                title="添加用户"
                :visible.sync="addDialogVisible"
                width="50%"
                @close="addDialogClosed">
                <!-- 内容主体区域 -->
                <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="70px">
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="addForm.username"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="addForm.password"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="addForm.email"></el-input>
                </el-form-item>
                <el-form-item label="手机" prop="mobile">
                    <el-input v-model="addForm.mobile"></el-input>
                </el-form-item>
                </el-form>
                <!-- 底部区域 -->
                <span slot="footer" class="dialog-footer">
                    <el-button @click="addDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="addUser">确 定</el-button>
                </span>
            </el-dialog>

            <!-- 修改用户的对话框 -->
            <el-dialog
                title="修改用户"
                :visible.sync="editDialogVisible"
                width="50%"
                @close="editDialogClosed">
                <el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="70px">
                <el-form-item label="用户名">
                    <el-input v-model="editForm.username" disabled></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="editForm.password"></el-input>
                </el-form-item> 
                <el-form-item label="手机" prop="mobile">
                    <el-input v-model="editForm.mobile"></el-input>
                </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="editDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="editUserInfo">确 定</el-button>
                </span>
            </el-dialog>

        </el-card>
    </div>
</template>

<script>

export default {
  data() {
    //   注意下面这些东西都是写在return外面的，而且函数与函数之间不需要逗号进行分隔
      //验证邮箱的规则
        var checkEmail=(rule,value,cb)=>{
            // 验证邮箱的正则表达式
            const regEmail= /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
            if(regEmail.test(value)){
                // 合法的邮箱
                return cb()
            }
            cb(new Error("请输入合法的邮箱"))
        }
        //验证手机号的规则
        var checkMobile=(rule,value,cb)=>{
            // 验证手机号的正则表达式
            const regMobile=/^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/ 
            if(regMobile.test(value)){
                // 合法的手机号
                return cb()
            }
            cb(new Error("请输入合法的手机号"))
        }
      return {

        //   获取用户列表的参数对象
        queryInfo:{
            query:"",
            // 当前是第几页
            pagenum:1,
            // 当前每页显示多少条数据
            pagesize:2
        },
        userlist:[],
        total:0,
        // 控制添加用户对话框的显示与隐藏
        addDialogVisible:false,
        // 添加用户的表单数据
        addForm:{
            username:"",
            password:"",
            email:"",
            mobile:""
            
        },
        // 添加表单的验证规则对象
        addFormRules:{
            username:[
                {required:true,message:"请输入用户名",trigger:"blur"},
                {min:3,max:10,message:"用户名的长度在3~10之间",trigger:"blur"}
            ],
            password:[
                {required:true,message:"请输入密码",trigger:"blur"},
                {min:6,max:15,message:"用户名的长度在6~15之间",trigger:"blur"}
            ],
            email:[
                {required:true,message:"请输入邮箱",trigger:"blur"},
                {validator:checkEmail,trigger:"blur"}
            ],
            mobile:[
                {required:true,message:"请输入手机",trigger:"blur"},
                {validator:checkMobile,trigger:"blur"}
            ]
        },
        // 控制修改用户对话框的显示与隐藏
        editDialogVisible:false,
        // 查询到的用户信息对象保存
        editForm:{},
        // 修改表单的验证规则对象
        editFormRules:{
            email:[
                {required:true,message:"请输入邮箱",trigger:"blur"},
                {validator:checkEmail,trigger:"blur"}
            ],
            mobile:[
                {required:true,message:"请输入手机",trigger:"blur"},
                {validator:checkMobile,trigger:"blur"}
            ]
        }
      }
  },
  created() {
      this.getUserList()
  },
  methods: {
      async getUserList(){
       const {data:res}= await  this.$http.get('users',{params:this.queryInfo})
    //    console.log(res);
       if(res.meta.status!==200) return this.$message.error("获取用户列表失败！")

        this.userlist=res.data.users
        this.total=res.data.total

      },
    //   监听handleSizeChange改变的事件
      handleSizeChange(newSize){
          this.queryInfo.pagesize=newSize
          this.getUserList()
      },
    //   监听页码值发生改变的事件
      handleCurrentChange(newPage){
          this.queryInfo.pagenum=newPage
          this.getUserList()
      },
    //  监听switch开关状态的改变 
      async userStateChanged(userinfo){
        //   这里有拼接动态数据，所以得用反引号，用单引号的话会报错
        // 反引号在tab键上面，1左边
        const {data:res}=await this.$http.put( `users/${userinfo.id}/state/${userinfo.mg_state}`)
        console.log(res);
        if (res.meta.status!=200){
            userinfo.mg_state=!userinfo.mg_state
            return this.$message.error("更新用户状态失败！")
        }
        this.$message.success("更新用户状态成功！")
      },
    //   监听用户对话框的关闭事件
      addDialogClosed(){
        //   重置清空添加用户的表
          this.$refs.addFormRef.resetFields()
      },
    //   添加用户界面 点击确定按钮，添加新用户
      addUser(){
          this.$refs.addFormRef.validate(async valid=>{
              if(!valid){
                  return 
              }
            //   预验证成功，可以发起添加用户的请求
           const {data:res}= await this.$http.post("users",this.addForm)
           if(res.meta.status!==201){
               this.$message.error("添加用户失败！")
           }
           this.$message.success("添加用户成功！")
        //    隐藏添加用户的对话框
           this.addDialogVisible = false
        //    重新刷新用户信息列表
            this.getUserList()
          })
      },
    //   编辑用户信息的对话框
      async showEditDialog(id){
        const {data:res}= await this.$http.get("users/"+id)
        if (res.meta.status!==200){
            return this.$message.error("查询用户失败")
        }
        this.editForm=res.data
        this.editDialogVisible = true
      },
    //   监听用户对话框的关闭事件
      editDialogClosed(){
          //   重置清空修改用户表单
          this.$refs.editFormRef.resetFields()
      },
    //   修改用户信息并提交
      editUserInfo(){
          this.$refs.editFormRef.validate(async valid=>{
              if(!valid){
                  return 
              }
            //   预验证成功，可以发起修改用户的请求
           const {data:res}= await this.$http.put("users/"+this.editForm.id,{email:this.editForm.email,mobile:this.editForm.mobile})
           if(res.meta.status!==200){
               this.$message.error("更新同步用户信息失败！")
           }
           this.$message.success("更新同步用户信息成功！")
        //    隐藏添加用户的对话框
           this.editDialogVisible = false
        //    重新刷新用户信息列表
            this.getUserList()
          })
      },
        //   根据id删除对应的用户信息
        removeUserById(id){
            //   弹框询问用户是否删除
            this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
                const res=  this.$http.delete("users/"+id)
                res.then((a)=>{
                    if(a.data.meta.status!==200) return this.$message.error("删除失败！")
                })
                
                // if(res.meta.status!==200) return this.$message.error("删除失败！")
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                })
                this.getUserList();
            }).catch(() => {
            this.$message({
                type: 'info',
                message: '已取消删除'
            });  
            })
        }
    }
}
</script>

<style>

</style>
